<template>
  <div>
    <div class="yy-content-1">
      <div class="yy-content-box">
        <div class="yy-title">总确诊病例数</div>
        <div class="yy-number" style="color:#f10c0c">{{ totalConfirmed }}</div>
      </div>
      <div class="yy-content-box">
        <div class="yy-title">总疑似病例数</div>
        <div class="yy-number" style="color:orange">{{ totalSuspected }}</div>
      </div>
      <div class="yy-content-box">
        <div class="yy-title">总住户数</div>
        <div class="yy-number">{{ totalHousehold }}</div>
      </div>
    </div>
    <div class="yy-content-1" >
     
      <div id="echart2" style="width:600px; height:350px;margin:auto;margin-top:30px "></div>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      totalSuspected: '',
      totalConfirmed: '',
      totalHousehold: '',
      tempData: []
     
    };
  },
  mounted () {
    this.$axios.accessStatistic().then(res => {
      this.$data.totalHousehold = res.data.totalHousehold;
      this.$data.totalConfirmed = res.data.totalConfirmed;
      this.$data.totalSuspected = res.data.totalSuspected;
      this.$data.access_x = res.data.household.x_time;
    
      
    });
    this.$axios.tempStatistic().then(res => {
      this.$data.tempData[1] = {
        name: '36.6~37.5℃',
        value: res.data.normal
      };
      this.$data.tempData[2] = {
        name: '大于37.5℃',
        value: res.data.over
      };
      this.$data.tempData[0] = {
        name: '小于36.6℃',
        value: res.data.under
      };
      this.drawLine2();
    });
  },
  methods: {
    
    drawLine2 () {
      var that = this;
      let myChart = that.$echarts.init(document.getElementById('echart2'));
      // 绘制图表
      myChart.setOption({
        title: {
          text: '用户出入体温检测结果统计',
          left: 'center' ,
          textStyle: {
            fontSize:26
        }
    
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['小于36.6℃', '36.6~37.5℃', '大于37.5℃']
        },
         toolbox: {
          feature: {
            saveAsImage: {},
          }
        },
        series: [
          {
            name: '比例',
            type: 'pie',
            radius: '65%',
            center: ['50%', '60%'],
            data: that.$data.tempData,
            roseType: 'angle',
            emphasis: {
              itemStyle: {
                // shadowBlur: 10,
                // shadowOffsetX: 0,
                // shadowColor: 'rgba(0, 0, 0, 0.5)'
                 normal: {
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
              }
            }
          }
        ]
      });
    }
  }
};
</script>

<style scoped>
.yy-content-1 {
  display: flex;
  flex-direction: row;
}
.yy-content-1 .yy-content-box {
  -ms-flex: 1;
  padding: 10px;
  flex: 1;
  margin: 2px 10px;
  
  height: 125px;
  text-align: center;
box-shadow: 5px 0px 10px 5px #aaa;
  border-radius: 10px;
  background: rgba(206, 243, 223, 0.808);
}
.yy-content-1 .yy-content-box .yy-title {
  color: #423333;
  border-radius: 2px 2px 0 0;
  font-size: 20px;
}
.yy-content-1 .yy-content-box .yy-number {
  font-size: 35px;
  font-weight: 700;
  color: #4fa2ef;
}

</style>
